<!-- 中间面板的组件 -->
<template>
    <div class="node-item" :key="item.key" :style="item.layoutType == 'free' ? {
             position: 'absolute',
             top: item.y + 'px', 
             left: item.x + 'px',
             width: item.width  + 'px', 
             height: item.height + 'px', 
             zIndex: item.componentProps.style.zIndex
             } :{}">
        <template v-if="item.children != undefined">
            <!-- 单独适配栅格布局 -->
            <template v-if="item.type == 'gridLayout'">
                <component :is="thisComponent" :item="item" @dragStart="dragStart" @clearOtherActive="clearOtherActive"
                    @copyComponent="copyComponent" @deleteComponent="deleteComponent"
                    @handleSetSelectItem="handleSetSelectItem" @addChildComponent="addChildComponent" :key="item.id">
                    <template #content>
                        <!-- row下面的col -->
                        <component v-for="childItem in item.children" :is="getItemComponent(childItem)"
                            :item="childItem" @dragStart="dragStart" @clearOtherActive="clearOtherActive"
                            @copyComponent="copyComponent" @deleteComponent="deleteComponent"
                            @handleSetSelectItem="handleSetSelectItem" @addChildComponent="addChildComponent"
                            :key="childItem.id">
                            <template #content>
                                <nodeItem v-for="itemChild in childItem.children" :item="itemChild"></nodeItem>
                            </template>
                        </component>
                    </template>
                </component>
            </template>
            <template v-else>
                <component :is="thisComponent" :item="item">
                    <template #content>
                        <nodeItem v-for="itemChild in item.children" :item="itemChild"></nodeItem>
                    </template>
                </component>
            </template>
        </template>

        <template v-else>

            <!-- 输入框 -->
            <template v-if="item.type == 'input'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-input v-model:value="pageData[item.field]" :size="item.componentProps.size"
                        :allow-clear="item.componentProps.allowClear" :maxlength="item.componentProps.maxlength"
                        :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                        :show-count="item.componentProps.showCount" :style="item.componentProps.style"
                        :placeholder="item.componentProps.placeholder"
                        @keyup.enter="getCustomMethod(item,'enter',$event)" @blur="getCustomMethod(item,'blur',$event)"
                        @focus="getCustomMethod(item,'focus',$event)" @change="getCustomMethod(item,'change',$event)"
                        @input="getCustomMethod(item,'input',$event)"></a-input>
                </a-form-item>
            </template>

            <!-- 颜色选择器 -->
            <template v-if="item.type == 'colorPicker'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-input type="color" v-model:value="pageData[item.field]" :size="item.componentProps.size"
                        :allow-clear="item.componentProps.allowClear" :maxlength="item.componentProps.maxlength"
                        :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                        :show-count="item.componentProps.showCount" :style="item.componentProps.style"
                        :placeholder="item.componentProps.placeholder"
                        @change="getCustomMethod(item,'change',$event)"></a-input>
                </a-form-item>
            </template>

            <!-- 下拉框 -->
            <template v-else-if="item.type == 'select'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-select v-model:value="pageData[item.field]" :placeholder="item.componentProps.placeholder"
                        :size="item.componentProps.size" :allow-clear="item.componentProps.allowClear"
                        :style="item.componentProps.style" :bordered="item.componentProps.bordered"
                        :disabled="item.componentProps.disabled" @blur="getCustomMethod(item,'blur',$event)"
                        @focus="getCustomMethod(item,'focus',$event)" @change="getCustomMethod(item,'change',$event)">
                        <a-select-option v-for="(option, index) in item.componentProps.options" :key="index"
                            :value="option.value">{{ option.label }}</a-select-option>
                    </a-select>
                </a-form-item>
            </template>

            <!-- 单选框 -->
            <template v-else-if="item.type == 'radio'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-radio-group v-model:value="pageData[item.field]" :placeholder="item.componentProps.placeholder"
                        :size="item.componentProps.size" :allow-clear="item.componentProps.allowClear"
                        :buttonStyle="item.componentProps.buttonStyle" :style="item.componentProps.style"
                        :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                        @change="getCustomMethod(item,'change',$event)">
                        <template v-if="item.componentProps.radioType == 'default'">
                            <a-radio v-for="(option, index) in item.componentProps.options" :key="index"
                                :value="option.value">{{ option.label }}</a-radio>
                        </template>
                        <template v-if="item.componentProps.radioType == 'button'">
                            <a-radio-button v-for="(option, index) in item.componentProps.options" :key="index"
                                :value="option.value">{{ option.label }}</a-radio-button>
                        </template>
                    </a-radio-group>
                </a-form-item>
            </template>

            <!-- 多选框 -->
            <template v-else-if="item.type == 'checkbox'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-checkbox-group v-model:value="pageData[item.field]"
                        :placeholder="item.componentProps.placeholder" :size="item.componentProps.size"
                        :allow-clear="item.componentProps.allowClear" :buttonStyle="item.componentProps.buttonStyle"
                        :style="item.componentProps.style" :bordered="item.componentProps.bordered"
                        :disabled="item.componentProps.disabled" @change="getCustomMethod(item,'change',$event)">
                        <a-checkbox v-for="(option, index) in item.componentProps.options" :key="index"
                            :value="option.value">{{ option.label }}</a-checkbox>
                    </a-checkbox-group>
                </a-form-item>
            </template>

            <!-- 文本域 -->
            <template v-else-if="item.type == 'textarea'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-textarea v-model:value="pageData[item.field]" :placeholder="item.componentProps.placeholder"
                        :size="item.componentProps.size" :maxlength="item.componentProps.maxlength"
                        :allow-clear="item.componentProps.allowClear" :style="item.componentProps.style"
                        :bordered="item.componentProps.bordered" :show-count="item.componentProps.showCount"
                        :disabled="item.componentProps.disabled" :auto-size="item.componentProps.autoSize"
                        @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                        @change="getCustomMethod(item,'change',$event)" @input="getCustomMethod(item,'input',$event)"
                        @keyup.enter="getCustomMethod(item,'enter',$event)">
                    </a-textarea>
                </a-form-item>
            </template>

            <!-- 数字输入框 -->
            <template v-else-if="item.type == 'inputNumber'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-input-number v-model:value="pageData[item.field]" style="width: 100%"
                        :size="item.componentProps.size" :bordered="item.componentProps.bordered"
                        :disabled="item.componentProps.disabled" :keyboard="item.componentProps.keyboard"
                        :min="item.componentProps.min" :max="item.componentProps.max" :style="item.componentProps.style"
                        :placeholder="item.componentProps.placeholder" @blur="getCustomMethod(item,'blur',$event)"
                        @focus="getCustomMethod(item,'focus',$event)" @change="getCustomMethod(item,'change',$event)"
                        @input="getCustomMethod(item,'input',$event)"
                        @keyup.enter="getCustomMethod(item,'enter',$event)" />
                </a-form-item>
            </template>

            <!-- 密码输入框 -->
            <template v-else-if="item.type == 'inputPassword'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-input-password v-model:value="pageData[item.field]" :size="item.componentProps.size"
                        :allow-clear="item.componentProps.allowClear" :maxlength="item.componentProps.maxlength"
                        :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                        :show-count="item.componentProps.showCount" :style="item.componentProps.style"
                        :placeholder="item.componentProps.placeholder" @blur="getCustomMethod(item,'blur',$event)"
                        @focus="getCustomMethod(item,'focus',$event)" @change="getCustomMethod(item,'change',$event)"
                        @input="getCustomMethod(item,'input',$event)"
                        @keyup.enter="getCustomMethod(item,'enter',$event)" />
                </a-form-item>
            </template>

            <!-- 按钮 -->
            <template v-else-if="item.type == 'button'">
                <a-button v-show="!item.componentProps.hidden" :style="item.componentProps.style"
                    :type="item.componentProps.type" :size="item.componentProps.size"
                    :disabled="item.componentProps.disabled" :ghost="item.componentProps.ghost"
                    :loading="item.componentProps.loading"
                    @click="getCustomMethod(item,'click',$event)">{{ item.label }}</a-button>
            </template>

            <!-- 标题 -->
            <template v-else-if="item.type == 'title'">
                <h1 v-if="item.componentProps.type == 'h1'" v-show="!item.componentProps.hidden"
                    :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h1>
                <h2 v-if="item.componentProps.type == 'h2'" v-show="!item.componentProps.hidden"
                    :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h2>
                <h3 v-if="item.componentProps.type == 'h3'" v-show="!item.componentProps.hidden" ref=""
                    :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h3>
                <h4 v-if="item.componentProps.type == 'h4'" v-show="!item.componentProps.hidden"
                    :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h4>
                <h5 v-if="item.componentProps.type == 'h5'" v-show="!item.componentProps.hidden"
                    :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h5>
                <h6 v-if="item.componentProps.type == 'h6'" v-show="!item.componentProps.hidden"
                    :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h6>
            </template>

            <!-- 日历 -->
            <template v-if="item.type == 'calendar'">
                <a-calendar v-model:value="pageData[item.field]" :fullscreen="false"
                    v-show="!item.componentProps.hidden" :style="item.componentProps.style" />
            </template>

            <!-- 警告提示 -->
            <template v-if="item.type == 'alert'">
                <a-alert :message="item.label" v-show="!item.componentProps.hidden" :type="item.componentProps.type"
                    :style="item.componentProps.style" :closable="item.componentProps.closable"
                    :show-icon="item.componentProps.showIcon" @close="getCustomMethod(item,'close',$event)" />
            </template>

            <!-- 时间轴 -->
            <template v-if="item.type == 'timeline'">
                <a-timeline :mode="item.componentProps.mode" v-show="!item.componentProps.hidden"
                    :reverse="item.componentProps.reverse" :style="item.componentProps.style">
                    <a-timeline-item v-for="(option, index) in item.componentProps.options" :color="option.color">
                        {{ option.text }}
                    </a-timeline-item>
                </a-timeline>
            </template>

            <!-- 分割线 -->
            <template v-if="item.type == 'divider'">
                <a-divider :type="item.componentProps.type" :plain="item.componentProps.plain"
                    v-show="!item.componentProps.hidden" :dashed="item.componentProps.dashed"
                    :style="item.componentProps.style" :orientation="item.componentProps.orientation">
                    {{ item.label }}
                </a-divider>
            </template>

            <!-- 时间选择框 -->
            <template v-if="item.type == 'timePicker'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">

                    <a-time-range-picker v-if="item.componentProps.range" v-model:value="pageData[item.field]"
                        :placeholder="[item.componentProps.placeholder,item.componentProps.placeholder2]"
                        value-format="HH:mm:ss" :allow-clear="item.componentProps.allowClear"
                        :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                        :size="item.componentProps.size" :style="item.componentProps.style"
                        :showNow="item.componentProps.showNow" :hour-step="item.componentProps.hourStep"
                        :status="item.componentProps.status" :minute-step="item.componentProps.minuteStep"
                        :second-step="item.componentProps.secondStep" :placement="item.componentProps.placement"
                        @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                        @change="getCustomMethod(item,'change',$event)"
                        @openChange="getCustomMethod(item,'openChange',$event)" />

                    <a-time-picker v-else v-model:value="pageData[item.field]" value-format="HH:mm:ss"
                        :status="item.componentProps.status" :placeholder="item.componentProps.placeholder"
                        :allow-clear="item.componentProps.allowClear" :bordered="item.componentProps.bordered"
                        :disabled="item.componentProps.disabled" :size="item.componentProps.size"
                        :style="item.componentProps.style" :showNow="item.componentProps.showNow"
                        :hour-step="item.componentProps.hourStep" :minute-step="item.componentProps.minuteStep"
                        :second-step="item.componentProps.secondStep" :placement="item.componentProps.placement"
                        @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                        @change="getCustomMethod(item,'change',$event)"
                        @openChange="getCustomMethod(item,'openChange',$event)" />

                </a-form-item>
            </template>

            <!-- 日期选择框 -->
            <template v-if="item.type == 'datePicker'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-range-picker v-if="item.componentProps.range" v-model:value="pageData[item.field]"
                        :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                        :size="item.componentProps.size" :style="item.componentProps.style"
                        :picker="item.componentProps.picker" :placement="item.componentProps.placement"
                        :status="item.componentProps.status"
                        :placeholder="[item.componentProps.placeholder,item.componentProps.placeholder2]"
                        :format="item.componentProps.format" @blur="getCustomMethod(item,'blur',$event)"
                        @focus="getCustomMethod(item,'focus',$event)" @change="getCustomMethod(item,'change',$event)"
                        @panelChange="getCustomMethod(item,'panelChange',$event)"
                        @openChange="getCustomMethod(item,'openChange',$event)" />

                    <a-date-picker v-else v-model:value="pageData[item.field]" :bordered="item.componentProps.bordered"
                        :disabled="item.componentProps.disabled" :size="item.componentProps.size"
                        :style="item.componentProps.style" :picker="item.componentProps.picker"
                        :placement="item.componentProps.placement" :status="item.componentProps.status"
                        :placeholder="item.componentProps.placeholder" :format="item.componentProps.format"
                        @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                        @change="getCustomMethod(item,'change',$event)"
                        @openChange="getCustomMethod(item,'openChange',$event)"
                        @panelChange="getCustomMethod(item,'panelChange',$event)" />
                </a-form-item>
            </template>

            <!-- 评分 -->
            <template v-if="item.type == 'rate'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-rate v-model:value="pageData[item.field]" :style="item.componentProps.style"
                        :disabled="item.componentProps.disabled" :allowHalf="item.componentProps.allowHalf"
                        @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                        @change="getCustomMethod(item,'change',$event)"
                        @hoverChange="getCustomMethod(item,'hoverChange',$event)" />
                </a-form-item>
            </template>

            <!-- 级联选择框 -->
            <template v-if="item.type == 'cascader'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-cascader v-model:value="pageData[item.field]" :style="item.componentProps.style"
                        :disabled="item.componentProps.disabled" :options="item.componentProps.options"
                        :size="item.componentProps.size" :allow-clear="item.componentProps.allowClear"
                        :bordered="item.componentProps.bordered" :placeholder="item.componentProps.placeholder"
                        @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                        @change="getCustomMethod(item,'change',$event)" />
                </a-form-item>
            </template>

            <!-- 滑动条 -->
            <template v-if="item.type == 'slider'">
                <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
                    <a-slider id="test" v-model:value="pageData[item.field]" :style="item.componentProps.style"
                        :disabled="item.componentProps.disabled" @blur="getCustomMethod(item,'blur',$event)"
                        :reverse="item.componentProps.reverse" :min="item.componentProps.min"
                        :max="item.componentProps.max" :range="item.componentProps.range"
                        @focus="getCustomMethod(item,'focus',$event)" @change="getCustomMethod(item,'change',$event)" />
                </a-form-item>
            </template>

            <!-- 超链接 -->
            <template v-if="item.type == 'link'">
                <a-button type="link" :href="item.componentProps.href" :target="item.componentProps.target"
                    :style="item.componentProps.style" :disabled="item.componentProps.disabled"
                    v-show="!item.componentProps.hidden" @click="getCustomMethod(item,'click',$event)">
                    {{ item.label }}
                </a-button>
            </template>

            <!-- 图片 -->
            <template v-if="item.type == 'image'">
                <div v-show="!item.componentProps.hidden">
                    <a-image :style="item.componentProps.style" :width="item.width ? item.width : 240"
                        :preview="item.componentProps.preview" :height="item.height ? item.height : 300"
                        :src="item.componentProps.src" @error="getCustomMethod(item,'error',$event)" />
                </div>
            </template>

            <template v-else>
                <component :is="thisComponent" :item="item"></component>
            </template>
        </template>

    </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, defineExpose, defineProps } from 'vue'
import { getComponentInstance } from '../componentManager.js'
import { getCustomMethod, pageData } from '../pageManager.js'

defineOptions({
    name: 'nodeItem'
})

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
})

// console.log("props.item::", props.item)
// console.log("pageData::", pageData)
// console.log("getComponentInstance::",getComponentInstance(props.item.type))

const thisComponent = getComponentInstance(props.item.type).component;

// 获取指定的组件
const getItemComponent = (childItem) => {
    let cmpI = getComponentInstance(childItem.type)
    return cmpI.component;
}

// 挂载DOM前触发
onBeforeMount(() => {
    getCustomMethod(props.item, 'onBeforeMount');
})

// 挂载DOM后触发
onMounted(() => {
    getCustomMethod(props.item, 'onMounted');
})

// 更新组件前触发
onBeforeUpdate(() => {
    getCustomMethod(props.item, 'onBeforeUpdate');
});

// 更新组件后触发
onUpdated(() => {
    getCustomMethod(props.item, 'onUpdated');
});

// 组件卸载前触发
onBeforeUnmount(() => {
    getCustomMethod(props.item, 'onBeforeUnmount');
});

// 组件卸载后触发
onUnmounted(() => {
    getCustomMethod(props.item, 'onUnmounted');
});


</script>

<style lang="less" scoped>
.ant-form-item {
    margin-bottom: 10px;
}
</style>../componentManager.js